<template>
    <el-dialog
        :before-close="resetForm"
        :close-on-click-modal="false"
        :visible.sync="visible"
        append-to-body
        title="查看文件发布详情信息"
        top="2vh"
        width="1060px"
    >
        <div class="edit_page_div">
            <div class="column_title" style="width: 500px;"><div class="column_name">发布文件信息</div></div>
            <div class="column_title" style="width: 500px; margin-left: 10px;"><div class="column_name">回复内容列表</div></div>
            <div class="region_block" style="width: 500px; height: 400px;">
                <div class="form_detail">
                    <div class="form_item_title" style="width: 100px;">文件编号：</div>
                    <div class="form_item_content"  style="width: 400px;">{{fileForm.fileCode}}</div>
                </div>
                <div class="form_detail">
                    <div class="form_item_title" style="width: 100px;">文件够狠：</div>
                    <div class="form_item_content"  style="width: 400px;">{{fileForm.fileName}}</div>
                </div>
                <div class="form_detail">
                    <div class="forml_item_title" style="width: 100px;">文件备注：</div>
                    <div class="form_item_content"  style="width: 400px;">{{fileForm.remarks}}</div>
                </div>
                <div class="form_detail">
                    <div class="form_item_title" style="width: 100px;">符件信息：</div>
                    <div class="form_item_content"  style="width: 400px;">
                        <div class="el_file_list">
                            <div v-for="item in fileForm.fileList" class="show-file">
                                <div class="show_file_name" @click="$common.downloadFile(item.id)">{{ item.fileName }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="region_block" style="width: 500px; height: 400px; margin-left: 10px;">
                <div v-for="item in fileForm.replyList" class="form_list">
                    <div class="form_title">{{ item.userName }} </div>
                    <div class="form_time"> ({{ item.createTime }})</div>
                    <div class="form_content">{{ item.replyContent }}</div>
                    <div class="el_file_list" style="width: 100%;">
                        <div v-for="temp in item.fileList" class="show-file">
                            <div class="show_file_name" @click="$common.downloadFile(temp.id)">{{ temp.fileName }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column_title" style="width: 100%"><div class="column_name">回复信息</div></div>
            <div class="region_block" style="width: 100%; height: 200px;">
                <el-form ref="form" :model="form" :rules="rules" :show-message="false" label-width="100px">
                    <el-form-item label="回复信息" prop="replyContent">
                        <el-input v-model="form.replyContent" style="width: 900px;" type="textarea" rows="3"></el-input>
                    </el-form-item>
                    <el-form-item label="符件信息" prop="fileList">
                        <div class="el_file_list" style="width: 600px;">
                            <el-button type="text" @click="showUpload=true">上传文件</el-button>
                            <div v-for="item in form.fileList" class="show-file">
                                <div class="show_file_name" @click="$common.downloadFile(item.id)">{{ item.fileName }}</div>
                                <el-button class="el-icon-error" type="text" @click="deleteFile(item)"></el-button>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <div class="edit_button">
                <el-button v-loading.fullscreen.lock="loading" type="primary" @click="submit">回 复</el-button>
                <el-button type="primary" @click="resetForm">取 消</el-button>
            </div>
            <upload-file :visible.sync="showUpload" suffixes="*" @change="setFileList"></upload-file>
        </div>
    </el-dialog>
</template>

<script>
import UploadFile from "@/components/upload/uploadFile.vue";

export default {
    name: "newsFilesDetail",
    components: {UploadFile},
    props: {
        visible: Boolean,
        id: String,
    },
    data() {
        return {
            loading: false,
            showUpload: false,

            fileForm: {
                fileCode: '',
                fileName: '',
                remarks: '',
                fileList: [],
                replyList: [],
            },

            form: {
                replyContent: '',
                fileList: [],
                fileIdList: [],
            },
            rules: {
                replyContent: [{required: true, message: '不能为空', trigger: 'change'}],
            },
        }
    },
    watch: {
        visible(newVal) {
            if (newVal) {
                this.getData();
            }
        }
    },
    methods: {
        getData() {
            this.loading = true;
            this.$axios.get("/CHILD_SYSTEM/newsFiles/getOneEntity/" + this.id).then(res => {
                this.fileForm = res.data;
            }).finally(() => {
                this.loading = false;
            })
        },
        setFileList(data) {
            if (data != null && data.length > 0) {
                data.forEach(file => {
                    this.form.fileList.push(file);
                })
            }
        },
        deleteFile(row) {
            this.form.fileList = this.form.fileList.filter(item => item.id !== row.id);
        },
        submit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.form.fileIdList = [];
                    this.form.fileList.forEach(file => {
                        this.form.fileIdList.push(file.id);
                    })
                    this.form.fileId = this.id;
                    this.loading = true;
                    this.$axios.post("/CHILD_SYSTEM/newsFiles/reply", this.form).then(() => {
                        this.resetForm();
                        this.$message.success(res.message);
                    }).finally(() => {
                        this.loading = false;
                    })
                } else {
                    this.$message.error('表单填写有误');
                    return false;
                }
            });
        },
        resetForm() {
            this.$refs.form.resetFields();
            this.form = this.$options.data().form;
            this.$emit('update:visible', false);
            this.$emit('refreshList');
        },
    }
}
</script>

<style lang="scss">

</style>